<template>
    <section class="information-detail">
			<scroller lock-x ref='scrollerBottom' :on-refresh="code==0 ? refresh : null" :on-infinite="code==0 ? infinite :null">
        <div class="loadingBg" v-if="showLoading">
            <div class="loading">
                <img src="../assets/image/loading.gif" />
            </div>
        </div>
        <div v-else-if="code==0">
					<div class="information-cont">
							
						<h3>{{informationCont.title}}</h3>
						<div class="smallLine">
							<span class="time">{{intime}}</span>
							<span class="watch">{{informationCont.viewCount}}</span>
						</div>
						<div class="artical-cont" v-html="informationCont.content"></div>
						<div class="like-info" @click="prevent && clickLiked()">
							<i :class="[likedStyle ? 'liked':'unLiked']"></i>
							<span :class="[likedStyle ? 'choosed':'noChoosed']">{{informationCont.likeCount || 0}}</span>
						</div>
						
						<div class="lineLabels">
							<ul>
								<li v-for="item in informationCont.labels" :key="item.id" @click="toLabelDetail(item.id,item.name)">{{item.name}}</li>
							</ul>
						</div>
					</div>
					<div v-if='informationCont.adMaterials' class="adContainer">
						<div v-for="(ad,index) in informationCont.adMaterials" :key='"ad"+index' class="advertising" @click='advertisingGo(ad.hrefUrl, ad.adName)'>
							<img :src="ad.adIconUrl" :alt="ad.adName">
							<i>广告</i>
						</div>
					</div>
					<div class="information-releat" v-if='informationCont.relatedReads&&informationCont.relatedReads.length>0'>
						<div class="releat-list">
							<div class="releat-title">相关新闻</div>
							<ul>
								<li 
									v-for='(read,index) in informationCont.relatedReads' 
									:key='"read"+index' 
									:id='read.id'
									@click="toInformationDetail(read.id,read.title)">
									<div class="pertinentThumbnail">
										<img v-if="read.cover" :src="read.cover" alt="">
										<img v-else src="../../static/hello.png" alt="掌门好老师">
									</div>
									<div class="pertinentSynopsis">
										<p class="mainContent">{{read.title | titleNum}}</p>
										<div class="subContent">
											<div class="tag-list">
												<span class="topicTag" v-if="read.labelNames">{{read.labelNames||''}}</span>
											</div>
											<!-- <span class="watch">{{read.viewCount||0}}</span> -->
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="hotResponse">
						<div class="resTitle">
							<div class="left">热门评论</div>
							<div class="right" @click="writeComment">写评论</div>
						</div>
						<ul class="responseList">
							<li class="resItem" v-for="(item, index) of topicList" :key="index">
								<div class="middle_img"><img :src="item.author.avatar ? item.author.avatar : defaultAvatar" ></div>
								<div class="content">
									<div class="content_title">
										<div class="title_1">
											<div class="header">
												<div class='name'>{{ item.author.name }}</div>
												<!-- 评论点赞隐藏 -->
												<div :class="['right', commitLiked ? 'isLiked' : '']">
													<!-- <img src="../assets/image/com_icon_favour_40_s.png" alt="" v-if="commitLiked">
													<img src="../assets/image/com_icon_favour_40_n.png" alt="" v-else>
													<span class="third">121</span> -->
												</div>
											</div>
											<p>{{ item.createTime ? (new Date(item.createTime)).format('yyyy-MM-dd hh:mm')  : '' }}</p>
										</div>
									</div>
									<div class="suggestion">{{ item.content }}</div>
								</div>
							</li>
						</ul>
						<!-- <div v-else class="noComment">
							<span>资讯不存在</span>
						</div> -->
					</div>
        </div>
        <div class="noCont" v-else>
					<img src="../assets/image/no_content.png">
					<span>资讯不存在</span>
        </div>
			</scroller>
    </section>
</template>

<script>
import api from "../api";
import {toast} from "../toast";
import { format	} from './../utils/filter'
export default {
    data(){
			return{
				informationCont:{
						adMaterials:[]
				},
				liked: 1,
				token: "",
				mobile: "",
				defaultAvatar: require('../assets/image/default_avatar.png'),// 默认头像
				prevent: true,
				intime: "",
				likedStyle: false,
				showLoading: true,
				code:0,
				commitLiked: false,
				popupVisible: false,
				
				topicCommentParams: {
					pageNo: 1,
					pageSize: 10,
					topicId: this.$route.query.tid,
				},
				topicList: [],
				onFetching: false,
				len: 0,
				
			}
    },
    filters:{
        titleNum: function(title){
            if(title.length>33){
                return title=title.slice(0,33)+'...'
            }else{
                return title
            }
        }
		},
    mounted(){
        //获取token给APP用的，这边不需要调用
        let that=this;
        window.updateToken = function (token, mobile) {
            that.token = token;
            that.mobile = mobile;
            // 用户已登录
						that.getReportResult()
				}
				// that.getReportResult()
				// that.token = "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJhcHAxNzQ1ODkyIiwidXNlcklkIjoiMTc0NTg5MiIsImZyb20iOiJhcHAiLCJuYmYiOjE1NzMwMjUyMzF9.jWw6ceLwxLGlIUSLdrQgaPiT61EWJV7fwbt5K5cDgga7eEonDxqER7C81gEGPygg-fVhuk9MPfjyrci-iWciiJKghFHjTcr2ScpoliW_oHt5s97Zsa5Z1NHDNyvkHRhKw5PgqB9NTGSXi0AmmBCpD2o4Lh59XIegNrVz64W5Kjg";
    },
	created() {
			let that=this;
			if(that.isTerminal()=='isiOS'){
			    window.webkit.messageHandlers.getToken.postMessage({})
			}else{
			   ZMParentsJsToAndroid.getToken()
			};
			//用户未登录
			setTimeout(function(){
					if(that.token==''){
							that.getReportResult()
							// that.topicCommentPage()
					}
			},100)
	},

	methods: {
		writeComment() {
			this.$router.push({path: '/writeCommit',query:{tid: this.$route.query.tid}});
		},
	
		infinite(done) {
			if (this.onFetching) {
				// do nothing
			} else {
				this.onFetching = true
				setTimeout(() => {
					if (this.topicCommentParams.pageNo > this.len) {
						setTimeout(() => {
							done(true)
						}, 50)
						return;
					}
					this.$nextTick(() => {
						this.topicCommentParams.pageNo += 1
						this.topicCommentPage()
						setTimeout(() => {
								this.onFetching = false
							done()
						})
					})
					// this.onFetching = false
				}, 2000)
			}
			setTimeout(() => {
				this.$refs.scrollerBottom.finishInfinite(true);
			}, 1000)

		},
		refresh(done) {
			this.topicCommentParams.pageNo = 1
			this.topicList = [];
			this.topicCommentPage()
			setTimeout(() => {
				done()
			},2000)
		},
		getReportResult() {
			const params = {
				mobile: this.mobile || "",
				tid: this.$route.query.tid
			};
			this.showLoading=true;
			this.informationCont={
					adMaterials:[]
			};
			api.getbbsHeadlines(params).then(res => {
				this.code=res.data.code;
				if (res.data.code == 0) {
					this.topicCommentPage()
					this.showLoading=false;
					this.informationCont = res.data.data;
					this.likedStyle = !!res.data.data.liked;
					if(this.likedStyle==false){
							this.liked= 1
					}else{
							this.liked= 2
					}
					let intimeString = new Date(res.data.data.inTime);
					const year = intimeString.getFullYear();
					let month = intimeString.getMonth() + 1;
					month = month > 9 ? month : "0" + month;
					const day =
						intimeString.getDate() > 9
							? intimeString.getDate()
							: "0" + intimeString.getDate();
					const hh =
						intimeString.getHours() > 9
							? intimeString.getHours()
							: "0" + intimeString.getHours();
					const mm =
						intimeString.getMinutes() > 9
							? intimeString.getMinutes()
							: "0" + intimeString.getMinutes();
					this.intime = year + "-" + month + "-" + day + " " + hh + ":" + mm;
					this.share()
				}else{
					this.showLoading=false;
					toast(res.data.message)
				}
			})
			.catch(err => {
				this.showLoading=false;
				toast(err);
			});
		},
		topicCommentPage() {
			api.topicCommentPage(this.topicCommentParams).then(res => {
				if (res.data.code == '0') {
					// this.topicList = res.data.data.list;
					this.len = Math.ceil(res.data.data.total / res.data.data.pageSize);
					const arr = res.data.data.list;
					arr.forEach(item => {
						if (this.topicList.indexOf(item) == -1) {
							this.topicList.push(item);
						}
					})
				}
				this.onFetching = false
			})
		},
		//安卓,IOS方法
		isTerminal(){
				var u = navigator.userAgent;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
				var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if (isAndroid) {
						return "isAndroid"
				} else if (isiOS) {
						return "isiOS"
				}
		},
		// 点赞
		clickLiked(){
				if(this.token!=""){
						this.prevent=false;
						const params ={
								tid: this.$route.query.tid,
								mobile: this.mobile,
								type: this.liked
						};
						api.likeInformation(params, this.token).then(res => {
								if (res.data.code == "0") {
										res.data.data.liked ? this.liked=2 :this.liked=1
										this.likedStyle = res.data.data.liked;
										this.prevent=true;
										this.informationCont.likeCount=res.data.data.likeCount;
								}else{
										toast(res.data.message);
										this.prevent=true;
								}
						}).catch(err => {
								toast(err);
								this.prevent=true;
						});
				}else{
						if(this.isTerminal()=='isiOS'){
								window.webkit.messageHandlers.goLogin.postMessage({})
						}else{
								ZMParentsJsToAndroid.goLogin()
						};
				};
		},
		//APP分享
		share(){
				let params={
						desc: this.informationCont.description,
						imgUrl: this.informationCont.cover,
						linkUrl: this.informationCont.shareUrl,
						title: this.informationCont.title
				}
				if(this.isTerminal()=='isiOS'){
						window.webkit.messageHandlers.configShareData.postMessage(params)
				}else{
						ZMParentsJsToAndroid.configShareData(JSON.stringify(params))
				};
		},
		// 资讯详情
		toInformationDetail(id,title){
				let params={
						id: id,
						title: title
				}
				if(this.isTerminal()=='isiOS'){
						window.webkit.messageHandlers.goNewsDetail.postMessage(params)
				}else{
						ZMParentsJsToAndroid.goNewsDetail(JSON.stringify(params))
				};
		},
		//标签详情
		toLabelDetail(id,title){
				let params={
						id: id,
						title: title
				}
				if(this.isTerminal()=='isiOS'){
						window.webkit.messageHandlers.goTagNewsList.postMessage(params)
				}else{
						ZMParentsJsToAndroid.goTagNewsList(JSON.stringify(params))
				};
		},
		//跳转广告页面
		advertisingGo(adUrl,title) {
				let params={
						link: adUrl,
						title: title
				}
				if(this.isTerminal()=='isiOS'){
						window.webkit.messageHandlers.openAD.postMessage(params)
				}else{
						ZMParentsJsToAndroid.openAD(JSON.stringify(params))
				};
		}
	}
}
</script>

<style lang="scss">
@import "../styles/mixin.scss";
.information-detail{
	width: px2rem(720);
	margin: 0 auto;
	background: #f4f5f7;
	overflow: hidden;

	.watch {
		background: url('../assets/image/parentHeadline/newWatch.png') no-repeat center left;
		background-size: px2rem(32) px2rem(32);
	}
	.information-cont{
		padding: 0 px2rem(30);
		background: #fff;
		white-space:normal; 
		word-break:break-all;
		h3 {
			font-size: px2rem(40);
			line-height: px2rem(64);
			color: #333333;
			font-weight: bold;
			padding-top: px2rem(30)
		}
		.artical-cont{
			padding-top: px2rem(32);
			font-size: px2rem(30);
			overflow: hidden;
			img{
				width: 100%;
			}
		}
		.like-info {
			width: px2rem(176);
			height: px2rem(72);
			margin: 0 auto;
			text-align: center;
			// border: px2rem(2) solid #cccccc;
			box-shadow:0px 2px 10px 0px rgba(153,153,153,0.2);
			border-radius: px2rem(40);
			margin-top: px2rem(50);
			i {
				display: inline-block;
				width: px2rem(32);
				height: px2rem(32);
				margin-right: px2rem(8);
				margin-top: px2rem(22);
				vertical-align: top;
			}
			.liked {
				background: url('../assets/image/com_icon_favour_32_s.png') center center no-repeat;
				background-size: 100%;
			}
			.unLiked {
				background: url('../assets/image/com_icon_favour_40_n.png') center center no-repeat;
				background-size: 100%;
			}
			span {
				line-height: px2rem(76);
				font-size: px2rem(28);
			}
			.choosed {
				// color: #80D566;
				color: #FFAD0D;
			}
			.noChoosed {
				color: #C7C7C7;
			}
		}
		.smallLine{
			display: flex;
			display: -webkit-flex;
			justify-content:space-between;
			-webkit-justify-content: space-between;
			align-items: center;
			-webkit-align-items: center;
			font-size: px2rem(26);
			color: #BBB;
			padding-top: px2rem(40);
			padding-bottom: px2rem(34);
			border-bottom: 1px solid #E5E8ED;
			.watch {
				padding: 0 0 0 px2rem(40);
				font-size: px2rem(24);
				color: #C7C7C7;
			}
		}
		.lineLabels{
			padding-top: px2rem(44);
			overflow: hidden;
			padding-bottom: px2rem(24);
			ul{
				li{
					float: left;
					margin: 0 px2rem(16) px2rem(16) 0;
					color: #999;
					font-size: px2rem(28);
					line-height: px2rem(40);
				}
				li:not(:last-child):after {
					content: '·';
					display: inline-block;
					margin-left: px2rem(16);
				}


			}
		}
	}
	.adContainer {
		width: px2rem(720);
		background: #fff;
		overflow: hidden;
	}
	.advertising {
		position: relative;
		background: #fff;
		margin: 0 px2rem(30) px2rem(40) px2rem(30);
		font-size: 0;
		height: px2rem(152);
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
		}
		img,
		i {
			display: inline-block;
		}
		i {
			position: absolute;
			top: 0;
			right: 0;
			width: px2rem(62);
			height: px2rem(26);
			opacity: 0.5;
			background: #000000;
			font-size: px2rem(21);
			color: #ffffff;
			text-align: center;
			line-height: px2rem(26);
			font-style: normal;
		}
	}
	.information-releat{
		// margin-top: px2rem(20);
		.releat-list{
			background: #F7F7FA;
			padding: px2rem(48) px2rem(32);
			.releat-title{
				font-size: px2rem(30);
				padding-bottom: px2rem(12);
				color: #666666;
			}
			li{
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				flex-wrap: nowrap;
				-webkit-flex-wrap: nowrap;
				justify-content: space-between;
				-webkit-justify-content: space-between;
				align-items: stretch;
				-webkit-align-items: stretch;
				padding-top: px2rem(40);
				.pertinentThumbnail {
					width: px2rem(224);
					height: px2rem(144);
					// margin-bottom: px2rem(26);
					border-radius: px2rem(6);
					overflow: hidden;
					box-sizing: border-box;
					img {
						width: 100%;
					}
				}
				.pertinentSynopsis {
					display: flex;
					display: -webkit-flex;
					flex-direction: column;
					flex-wrap: nowrap;
					-webkit-flex-wrap: nowrap;
					justify-content: space-between;
					-webkit-justify-content: space-between;
					align-items: center;
					-webkit-align-items: center;
					// padding-bottom: px2rem(26);
					// border-bottom: 1px solid #eee;
					.mainContent {
						width: px2rem(414);
						font-size: px2rem(24);
						line-height: px2rem(34);
						font-weight: bold;
						color: #222;
						word-break: break-all;
						white-space: pre-wrap;
					}
					.subContent {
						display: flex;
						display: -webkit-flex;
						flex-direction: row;
						flex-wrap: nowrap;
						-webkit-flex-wrap: nowrap;
						justify-content: space-between;
						-webkit-justify-content: space-between;
						align-items: center;
						-webkit-align-items: center;
						width: px2rem(414);
						.tag-list{
							width: 75%;
							float: left;
							.topicTag {
								font-size: px2rem(18);
								line-height: px2rem(34);
								color: #bbb;
								float: left;
								// border: 1px solid #f4f5f7;
								border-radius: px2rem(6);
								// padding: px2rem(2) px2rem(8);
								// margin: 0 px2rem(8) px2rem(8) 0;
							}
						}
						.watch {
							padding: 0 0 0 px2rem(36);
							font-size: px2rem(24);
							line-height: px2rem(34);
							color: #ccc;
						}
					}
				}
					
			}
		}
	}

	.hotResponse {
		padding: px2rem(56) px2rem(32) px2rem(80);
		background: #fff;

		.resTitle {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				color: #222;
				font-size: px2rem(36);
				font-weight: bold;
				line-height: px2rem(40);
			}

			.right {
				color: #FFAD0D;
				font-size: px2rem(28);
				font-weight: bold;
				line-height: px2rem(40);
			}

		}

		.responseList {
			list-style: none;
			padding-left: 0;

			.resItem {
				padding: px2rem(46) 0 px2rem(32);
				border-bottom: 1px solid #E5E8ED;
				display: flex;
				justify-content: space-between;

				.middle_img {
					text-align: center;
					img {
						width: px2rem(80);
						height: px2rem(80);
						border-radius: 50%;
					}
				}
				.content {
					width: 85%;
					.content_title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 0.25rem;
						margin-bottom: px2rem(25);
						.title_1 {
							font-size: px2rem(32);
							width: 100%;
							.header {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.name {
									font-size: px2rem(30);
									color: #222;
									font-weight: bold;
								}

								.right {
									display: flex;
									justify-content: flex-start;
									align-items: center;
									img {
										width: px2rem(40);
										height: px2rem(40);
									}
									.third {
										color: #C7C7C7;
										font-size: px2rem(26);
										margin-left: px2rem(4);
										line-height: px2rem(39);
									}
								}
								.isLiked {
									.third {
										color: #FFAD0D;
									}
								}
								
							}

							p {
								font-size: px2rem(24);
								color: #C7C7C7;
								margin-top: px2rem(6);
							}
						}

					}
					.suggestion {
						color: #999;
						margin-bottom: px2rem(15);
						font-size: px2rem(28);
					
					}
				}
			}

		}

	}

	.loadingBg{
		background: #fff;
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 999
	}
	.loading{
		width: px2rem(200);
		height: px2rem(200);
		display: block;
		position: fixed;
		left: 50%;
		top: 100%;
		z-index: 9999;
		margin-left: px2rem(-100);
		margin-top: px2rem(-100);
		background-size: 10% 10%;
		img{
			width: 100%
		}
	}
	.noCont{
		height: 300px;
		background: #fff;
		padding-top: px2rem(100);
		text-align: center;
		span{
			display: block;
			text-align: center;
			font-size: px2rem(30)
		}
		img{
			width: 50%;
		}
	}

	.mint-popup {
		width: 100%;
		height: 100%;



	}

}

textarea::-webkit-input-placeholder {
	color: #C7C7C7;
}

textarea::-moz-placeholder {
	color: #c7c7c7;
}

textarea::-moz-placeholder {
	color: #c7c7c7;
}

textarea:-ms-input-placeholder {
	color: #c7c7c7;
}

</style>
